NativeScript React — Nav Buttons, Progress Bar, Scroll View, and Search Box

React is an easy to use framework for building front end apps.

NativeScript is a mobile app framework that lets us build native mobile apps with popular front end frameworks.

In this article, we’ll look at how to build an app with NativeScript React.

NavigationButton

We can add a navigationButton component to the actionBar to add a button into the top bar.

For example, we can write:

import * as React from "react";

export default function Greeting({ }) {
  return (
    <frame>
      <page>
        <actionBar title="My App">
          <navigationButton
            nodeRole="navigationButton"
            text="Go back"
            android={{
              position: undefined,
              systemIcon: "ic_menu_back"
            }}
            onTap={() => { }}
          />
        </actionBar>
        <flexboxLayout justifyContent='center' >
        </flexboxLayout>
      </page>
    </frame>
  );
}

to add the button.

We add the onTap prop to add a function to run when we tap on the button.

Page

The page component lets us add an app screen into our app.

To use it, we can write:

import * as React from "react";

export default function Greeting({ }) {
  return (
    <frame>
      <page>
        <actionBar title="My App">
        </actionBar>
        <flexboxLayout justifyContent='center' >
        </flexboxLayout>
      </page>
    </frame>
  );
}

We can set various props like stratus bar style, background under the status bar, and more.

Progress

The progress component lets us show a bar to indicate the progress of a task

For example, we can write:

import * as React from "react";

export default function Greeting({ }) {
  return (
    <frame>
      <page>
        <actionBar title="My App">
        </actionBar>
        <flexboxLayout justifyContent='center' >
          <progress value={50} maxValue={100} />
        </flexboxLayout>
      </page>
    </frame>
  );
}

to add a progress bar into our app.

ScrollView

A scrollView component lets us show a scrollable content area.

Content can be scrolled vertically or horizontally.

For example, we can write:

import * as React from "react";

export default function Greeting({ }) {
  return (
    <frame>
      <page>
        <actionBar title="My App">
        </actionBar>
        <flexboxLayout justifyContent='center' >
          <scrollView orientation="horizontal">
            <stackLayout orientation="horizontal">
              {Array(100)
                .fill(undefined)
                .map((_, i) => <label
                  key={i}
                  text={i.toString()}
                  style={{ width: 30 }}
                />)
              }
            </stackLayout>
          </scrollView>
        </flexboxLayout>
      </page>
    </frame>
  );
}

to render an array of numbers and make the scroll view and stack layout scrollable horizontally with the orientation prop set to horizontal .

SearchBar

We can use the searchBar component to add a search bar into our app.

For example, we can write:

import { Dialogs } from "@nativescript/core";
import * as React from "react";

export default function Greeting({ }) {
  const [value, setValue] = React.useState()
  return (
    <frame>
      <page>
        <actionBar title="My App">
        </actionBar>
        <flexboxLayout justifyContent='center' >
          <searchBar
            hint="Search hint"
            text="searchPhrase"
            onTextChange={({ value }) => setValue(value)}
            onSubmit={() => Dialogs.alert(value)}
            onClose={() => console.log('close')}
          />
        </flexboxLayout>
      </page>
    </frame>
  );
}

We add the searchBar component with the hint prop to add a placeholder into the search box.

text has the default value of the text that we enter into the search box.

onTextChange has a function that’s called when we enter something into the box.

We can get what we enter with the value property from the parameter.

onSubmit is called when we press Enter.

onClose is called when we tap the close button.

Conclusion

We can add navigation buttons, progress bar, scroll view, and search bar into our React NativeScript app.